import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Select, Breadcrumb, Space, Col, Row, Checkbox, DatePicker, Radio, TimePicker } from 'antd';
import dayjs from 'dayjs';
import { useNavigate } from 'react-router-dom';
import service from '../../../../api/lst';
import './Addscenario.scss'
import { useSearchParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'

const { RangePicker } = DatePicker;
const { TextArea } = Input;
function Addscenario(props: any) {
    var [text, setText] = useState([])
    let id = useSelector((state: any) => state.id)
    var dispatch = useDispatch()
    var info = async () => {


        // var res3 = await service.marketing.conpon_info({ id })
        // // console.log(res3);
        // setText(res3.data)
    }
    useEffect(() => {
        info()
    }, [])
    var navigate = useNavigate()
    //返回
    const back = () => {
        navigate('/index/scenario')
    }
    //提交
    var onFinish = async (formvalues: any) => {
        // console.log(formvalues);
        const time = (formvalues.data.$y) + "-" + (formvalues.data.$M + 1) + "-" + (formvalues.data.$D)+" "+(formvalues.times.$H) + ":" + (formvalues.times.$m) + ":" + (formvalues.times.$s)

        if(id){
            var res = await service.marketing.scenario_list2({id:id, name: formvalues.name, type: formvalues.type, move: formvalues.move, states: formvalues.states, time: time, range: formvalues.range, Notification: formvalues.Notification })  
        }else{
            var res = await service.marketing.scenario_add({ name: formvalues.name, type: formvalues.type, move: formvalues.move, states: formvalues.states, time: time, range: formvalues.range, Notification: formvalues.Notification })      
            console.log(time);
        }

        dispatch({ type: 'REMOVE_ID'})
        navigate('/index/scenario')

    }
    return (
        <div className='addscenario'>
            <div className="head">
                <div className="top">
                    <div className="bread">
                        <Breadcrumb>
                            <Breadcrumb.Item>营销</Breadcrumb.Item>
                            <Breadcrumb.Item>
                                <a href="">场景营销</a>
                            </Breadcrumb.Item>
                            <Breadcrumb.Item>
                                <a href="">新建场景营销</a>
                            </Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    {id ? <h2>编辑场景营销</h2> : <h2>新建场景营销</h2>}

                </div>

            </div>
            <div className='form'>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    style={{ maxWidth: 800 }}
                    onFinish={onFinish}

                >
                   
                    <Form.Item name='type' label="活动营销" >
                    <Radio.Group>
                            <Radio value= '生日营销'> 生日营销 </Radio>
                            <Radio value="节日营销"> 节日营销 </Radio>
                            <Radio value="会员回馈营销"> 会员回馈营销 </Radio>
                            <Radio value="其他营销"> 其他营销 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    
                    <Form.Item name='name' label="活动名称" >
                        <Select
                            style={{ marginRight: 30,width:300}}
                            options={[
                                { value: '生日营销专享优惠', label: '生日营销专享优惠' },
                                { value: '节日营销专享优惠', label: '节日营销专享优惠' },
                                { value: '会员回馈营销专享优惠', label: '会员回馈营销专享优惠' },
                                { value: '其他营销专享优惠', label: '其他营销专享优惠' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item name="states" label="活动状态">
                        <Radio.Group>
                            <Radio value="未开始"> 未开始 </Radio>
                            <Radio value="进行中"> 进行中 </Radio>
                            <Radio value="已结束"> 已结束 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item name="channel" label="活动渠道">
                        <Checkbox.Group style={{ width: '100%' }}
                        //onChange={onChange}
                        >
                            <Row>
                                <Col span={20}>
                                    <Checkbox value="weixin"> 微信商城</Checkbox>
                                </Col>
                                <Col span={20}>
                                    <Checkbox value="pc">PC网站</Checkbox>
                                </Col>
                                <Col span={20}>
                                    <Checkbox value="app"> App</Checkbox>
                                </Col>
                            </Row>
                        </Checkbox.Group>
                    </Form.Item>
                    <Form.Item name='range' label="活动人群">
                        <Select style={{ marginRight: 30,width:300}}>
                            <Select.Option value="全部会员">全部会员</Select.Option>
                            <Select.Option value="普通会员">普通会员</Select.Option>
                            <Select.Option value="银卡会员">银卡会员</Select.Option>
                            <Select.Option value="金卡会员">金卡会员</Select.Option>
                            <Select.Option value="白金会员">白金会员</Select.Option>
                            <Select.Option value="铂金会员">铂金会员</Select.Option>
                            <Select.Option value="至尊会员">至尊会员</Select.Option>
                        </Select>
                    </Form.Item>
                    {/* <Form.Item name='decrement' label="满减商品" >
                        <Input />
                    </Form.Item> */}
                    <Form.Item name="move" label="活动时间">
                        <Radio.Group>
                            <Radio value="当天"> 当天 </Radio>
                            <Radio value="当周"> 当周 </Radio>
                            <Radio value="当月"> 当月 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="有效期">
                        <Input.Group compact>
                            <Form.Item
                                name='data'
                            >
                                <DatePicker />
                            </Form.Item>
                            <Form.Item
                                name='times'
                            >
                                <TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} />
                            </Form.Item>
                        </Input.Group>
                    </Form.Item>

                    <Form.Item name="notification" label="通知渠道">
                        <Checkbox.Group style={{ width: '100%' }}
                        //onChange={onChange}
                        >
                            <Row>
                                <Col span={20}>
                                    <Checkbox value="message"> 短信</Checkbox>
                                </Col>
                                <Col span={20}>
                                    <Checkbox value="news">商城消息推送</Checkbox>
                                </Col>
                            </Row>
                        </Checkbox.Group>
                    </Form.Item>
                    <Form.Item label="操作">
                        <Button htmlType="submit" style={{ marginRight: 30 }}>
                            提交
                        </Button>
                        <Button htmlType="button"
                            onClick={back}
                        >
                            返回
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Addscenario;